// 视频
				  // 获取对象
				  function getObj(tag) {
				  	return document.querySelector(tag);
				  }
				  
				  // 视频对象
				  var v = getObj('.my-video');
				  var vWidth = getObj('.videobox').offsetWidth; // 视频宽度，根据需要调整
				  var minWidth = 500; // 视频窗口最小宽度
				  var maxWidth = 1400; // 视频窗口最多宽度
				  var WaH; // 视频宽高比
				  var isSmall = false; // 是否处于窗口模式
				  var smallWidth = 300; // 小窗口宽度
				  var isMoive = false; // 是否为电影模式
				  var haveHour = false; // 时长是否大于1小时
				  var vTimer; // 动态时长定时器
				  var progressWidth = vWidth; // 进度条宽度
				  var volumeWidth = 60; // 音量条宽度
				  var curPos = 60; // 音条当前位置
				  var halfSlider = 6; // 半个滑块的宽度
				  var isFull = false; // 当前是否全屏
				  
				  // 设置各元素大小
				  function setSize() {
				  	var spaceW = 40;
				  	// var width = document.body.clientWidth - spaceW;
				  	var width = 800 - spaceW;
				  	if(width < minWidth+spaceW) {
				  		width = minWidth+spaceW;
				  	}else if(width > maxWidth+spaceW) {
				  		width = maxWidth+spaceW;
				  	};
				  	var height = width / WaH;
				  	v.width = width;
				  	v.height = height;
				  	progressWidth = width;
				  	// 设置宽/高度
				  	getObj('.playwindow').style.width = width + 20 + 'px';
				  	getObj('.playbox').style.width = width + 'px';
				  	getObj('.playbox').style.height = height + 48 + 'px';
				  	getObj('.progress').style.width = width + 'px';
				  	getObj('.videobox').style.width = width + 'px';
				  	getObj('.videobox').style.height = height + 'px';
				  }
				  
				  // 视频就绪事件
				  v.oncanplay = function() {
				  	WaH = v.clientWidth / v.clientHeight; // 宽高比
				  	// setSize();
				  	// 获取视频总时长
				  	var darution = v.duration;
				  	haveHour = darution >= 3600;
				  	getObj('.dtime').innerHTML = makeTime(darution);
					// 更新时长
					nowTime();
					// 更新进度条
					changePreGress();
				  }
				  
				  // resize事件
				  // window.addEventListener('resize', function() {
				  // 	// 当非窗口模式时才启用
				  // 	if(!isSmall) {
				  // 		setSize();
				  // 	}
				  // })
				  
				  // 设置小窗口
				  function setSmall() {
				  	var videobox = getObj('.videobox');
				  	// 如果处于小窗口返回
				  	if(isSmall) return;
				  	isSmall = true;
				  	var height = smallWidth / WaH;
				  	v.width = smallWidth;
				  	v.height = height;
				  	videobox.classList.add('small');
				  	// videobox.style.width = smallWidth + 'px';
				  	// videobox.style.height = height + 'px';
				  	
				  	// 鼠标悬停显示播放/暂停按钮
				  	if(v.paused) {
				  		videobox.classList.add('show-play');
				  	}
				  	videobox.onmouseenter = function() {
				  		if(isSmall) {
				  			videobox.classList.add('show-play');
				  		}
				  	}
				  	videobox.onmouseleave = function() {
				  		if(isSmall && !v.paused) {
				  			videobox.classList.remove('show-play');
				  		}
				  	}
				  }
				  
				  // 取消小窗口
				  function exitSmall() {
				  	if(!isSmall) return;
				  	isSmall = false;
				  	getObj('.videobox').classList.remove('small');
				  	// 重新设置大小
				  	// setSize();
				  }
				  
				  // 监听窗口滚动
				  window.addEventListener('scroll', function() {
				  	var height = parseInt(getObj('.playbox').style.height) + getObj('.playbox').offsetTop;
				  	var top = document.documentElement.scrollTop;
				  	if(top > height - 50) {
				  		// 窗口模式
				  		setSmall();
				  	}else{
				  		// 退出窗口模式
				  		exitSmall();
				  	}
				  })
				  
				  // 全屏
				  getObj('.fullscreen').onclick = function() {
					  // 退出电影模式
					  getObj('.fullback').classList.remove('active');
					  getObj('.movie').title = '电影模式';
					 isMoive = false;
					  var videoWindow = getObj('.playwindow');
				  	if(isFull) {
						videoWindow.classList.remove('full');
						// 更新进度条，防止时间不对
						 progressWidth = vWidth;
						 this.title = '全屏';
					}else{
						// 更新进度条，防止时间不对
						 progressWidth = document.body.clientWidth;
						videoWindow.classList.add('full');
						this.title = '退出全屏';
					}
					isFull = !isFull;
				  }
				  
				  // 用户按下 Esc 退出全屏
				  document.onkeydown = function(e) {
					  var e = e || window.event;
					  if(e.keyCode == 27) {
						  getObj('.playwindow').classList.remove('full');
						  isFull = false;
					  }
				  }
				  
				  // 电影模式
				  getObj('.movie').onclick = function() {
					  // 退出全屏模式
					   getObj('.playwindow').classList.remove('full');
					   getObj('.fullscreen').title = '全屏';
					  isFull = false;
				  	var fullback = getObj('.fullback');
				  	if(isMoive) {
				  		// 退出电影模式
				  		fullback.classList.remove('active');
				  		this.title = '电影模式';
						progressWidth = vWidth;
				  	}else{
				  		// 电影模式
				  		fullback.classList.add('active');
				  		this.title = '退出电影模式';
						progressWidth = 1000;
				  	}
				  	// 取非
				  	isMoive = !isMoive;
				  }
				  
				  // 播放
				  function play() {
					  // 隐藏记录
					  getObj('.play-tips').style.display = 'none';
				  	getObj('.play').classList.add('pause');
				  	getObj('.videobox').classList.add('pause');
				  	setTimeout(function() {
				  		getObj('.videobox').classList.remove('show-play');
				  	}, 500);
				  	// 实时时间
				  	vTimer = setInterval(function() {
						console.log('setinterval')
				  		nowTime(); // 更新时长
				  		changePreGress(); // 更新进度条
				  	}, 1000)
				  	v.play();
				  }
				  
				  // 暂停
				  function pause() {
				  	getObj('.play').classList.remove('pause');
				  	getObj('.videobox').classList.remove('pause');
				  	getObj('.videobox').classList.add('show-play');
				  	// 清除之前定时器
				  	clearInterval(vTimer);
				  	v.pause();
				  }
				  
				  // 播放暂停
				  function playAndPause() {
				  		if(v.paused) {
				  			play();
				  			this.title = '暂停';
				  		}else{
				  			this.title = '播放';
				  			pause();
				  		}
				  }
				  
				  // 点击播放/暂停
				  getObj('.play').onclick = function() {
				  	playAndPause();
				  }
				  getObj('.video-play').onclick = function() {
				  	playAndPause();
				  }
				  
				  // 停止
				  function stoped() {
				  	pause();
				  	v.currentTime = 0;
				  	nowTime(); // 更新时长
				  	changePreGress(); // 更新进度条
				  }
				  
				  // 重新播放
				  getObj('.videoReset').onclick = function() {
					  v.currentTime = 0;
					  // 更新时长
					  nowTime();
					  // 更新进度条
					  changePreGress();
					  play();
					  getObj('.play-tips').style.display = 'none';
				  }
				  
				  // 点击"停止"
				  getObj('.stop').onclick = function() {
				  	stoped();
				  }
				  v.onended = function() {
				  	stoped();
				  }
				  
				  /**
				   * 把秒值转换为时：分：秒，
				   * 不超过一小时转为分：秒
				   */
				  function makeTime(time) {
				  	time = Math.floor(time);
				  	var h = Math.floor(time / 3600);
				  	var m = Math.floor((time-h*3600)/60);
				  	var s = time-h*3600 - m*60;
				  	m = m < 10 ? '0' + m : m;
				  	s = s < 10 ? '0' + s : s;
				  	if(haveHour) {
				  		h = h < 10 ? '0' + h : h;
				  		return h + ':' + m + ':' + s;
				  	}
				  	return m + ':' + s;
				  }
				  
				  // 当前播放的时间
				  function nowTime() {
				  	getObj('.ctime').innerHTML = makeTime(v.currentTime);
				  }
				  
				  // 根据播放时间调整进度条
				  function changePreGress() {
				  	var cur = v.currentTime / v.duration * progressWidth;
					console.log(v.currentTime, v.duration, progressWidth)
				  	getObj('.now').style.width = cur + 'px';
				  }
				  
				  // 点击修改进度
				  getObj('.progress').onclick = function(e) {
				  	var e = e || window.event;
				  	var cur = e.offsetX / progressWidth;
				  	v.currentTime = cur * v.duration;
				  	getObj('.now').style.width = (cur * v.duration) / v.duration * progressWidth + 'px';
					clearInterval(vTimer);
					play();
				  }
				  
				  //  鼠标悬停进度条显示时长
				  getObj('.progress').onmouseenter = function(e) {
				  	if(v.currentTime <= 0) return;
				  	getObj('.progress').onmousemove = function(e) {
				  		var cur = e.offsetX / progressWidth;
				  		this.title = makeTime((cur * v.duration));
				  	}
				  }
				  
				  // 点击倍速
				  var speedBox = document.querySelectorAll('.speed-content div');
				  for(var sp = 0; sp < speedBox.length; sp++) {
				  	speedBox[sp].onclick = function() {
				  		var isValue = this.getAttribute('value');
				  		getObj('.cur-speed').innerHTML = '倍速 ' + isValue + 'x';
				  		v.playbackRate = isValue;
				  	}
				  }
				  
				  // 调整音量条位置
				  function setPos(pos) {
				  	if(pos <= 0) {
				  		pos = 0;
				  	}else if(pos > volumeWidth){
				  		pos = volumeWidth;
				  	}
				  	getObj('.vnow').style.width = pos + 'px';
				  	getObj('.v-slider').style.left = (pos - halfSlider) + 'px';
				  	v.volume = pos / volumeWidth;
				  	// 显示音量百分比
				  	var voNum = pos / volumeWidth;
				  	voNum = Math.floor(Number(voNum.toFixed(2)) * 100);
				  	getObj('.show-value').style.display = 'block';
				  	getObj('.show-value').innerHTML = voNum + '%';
				  	
				  	// 音量值为0需要设置为禁音
				  	var volume = getObj('.volume');
				  	var muted = getObj('.muted');
				  	if(v.volume <= 0) {
				  		volume.classList.add('active');
				  		muted.title = '开启';
				  		v.muted = true;
				  	}else{
				  		volume.classList.remove('active');
				  		muted.title = '静音';
				  		v.muted = false;
				  	}
				  }
				  
				  // 禁音点击
				  getObj('.muted').onclick = function() {
				  	var muted = v.muted,
				  		volume = getObj('.volume');
				  	if(muted) {
				  		volume.classList.remove('active');
				  		this.title = '静音';
				  		if(curPos <= 0) {
				  			// 更新音量
				  			setPos(volumeWidth);
				  			curPos = volumeWidth;
				  		}else{
				  			// 更新音量
				  			setPos(curPos);
				  		}
				  		
				  		
				  	}else{
				  		volume.classList.add('active');
				  		this.title = '开启';
				  		curPos = 0;
				  		// 更新音量
				  		setPos(curPos);
				  	}
				  	v.muted = !muted;
				  }
				  
				  // 拖动滑块调节音量
				  var ls = 0;
				  getObj('.v-slider').onmousedown = function(e) {
				  	var e = e || window.event;
				  	var x = e.clientX;
				  	getObj('.volume-box').onmousemove = function(ev) {
				  		var ev = ev || window.event;
				  		var mx = ev.clientX;
				  		ls = curPos - (x - mx);
				  		// 更新进度条
				  		setPos(ls);
				  	}
				  	document.onmouseup = function() {
				  		curPos = ls;
				  		getObj('.volume-box').onmousemove = null;
				  		setTimeout(function(){
				  			getObj('.show-value').style.display = 'none';
				  		}, 500);
				  	}
				  }